      
<template>
  <main class="container">
    <div class="label-box-content">
      <el-row :gutter="24">
        <el-col :span="24">
          <div class="simulate-left">
            <!-- 认证步骤 -->
            <div class="tabOne">
              <!-- 1 -->
              <div
                class="tablist"
                :class="[
                  caseState == '1' ? 'isActive' : '',
                  caseState > 1 ? 'isOk' : '',
                  caseState > 1 ? 'opcityb' : '',
                ]"
              >
                <i class="tabNum">1</i>
                <i class="el-icon-success"></i>
                <el-button>
                  <span
                    :class="[
                      caseState == '1' ? 'tablistspan' : '',
                      caseState > '1' ? 'tablisttn' : '',
                    ]"
                  >
                    输入案情</span
                  ></el-button
                >
              </div>
              <b
                :class="[
                  caseState == 1 ? 'isActive' : '',
                  caseState > 1 ? 'isOk' : '',
                  caseState > 1 ? 'opcityb' : '',
                ]"
              ></b>
              <!-- 2 -->
              <div
                class="tablist"
                :class="[
                  caseState == '2' ? 'isActive' : '',
                  caseState > 2 ? 'isOk' : '',
                ]"
              >
                <i class="tabNum">2</i>
                <i class="el-icon-success"></i>
                <el-button>
                  <span
                    :class="[
                      caseState == '2' ? 'tablistspan' : '',
                      caseState > '2' ? 'tablisttn' : '',
                    ]"
                  >
                    数据分析</span
                  ></el-button
                >
              </div>
              <b
                :class="[
                  caseState == 2 ? 'isActive' : '',
                  caseState > 2 ? 'isOk' : '',
                  caseState > 2 ? 'opcityb' : '',
                ]"
              ></b>
              <!-- 3 -->
              <div
                class="tablist"
                :class="[
                  caseState == '3' ? 'isActive' : '',
                  caseState > 3 ? 'isOk' : '',
                ]"
              >
                <i class="tabNum">3</i>
                <i class="el-icon-success"></i>
                <el-button>
                  <span
                    :class="[
                      caseState == '3' ? 'tablistspan' : '',
                      caseState > '3' ? 'tablisttn' : '',
                    ]"
                  >
                    获取报告</span
                  ></el-button
                >
              </div>
            </div>

            <!-- 输入案情 ******************** -->
            <div class="inputCase" v-if="caseState == 1">
              <el-input
                type="textarea"
                :rows="10"
                @change="changtag"
                placeholder="请输入内容"
                resize="none"
                v-model="textarea"
              >
              </el-input>
              <div class="label-list">
                <el-tag
                  v-for="(label, index) in labelList"
                  @click="clickTagList(label)"
                  :key="index"
                  type="info"
                  effect="plain"
                  :class="
                    label.isChecked && selectExpertType == '2'
                      ? 'isChecked'
                      : ''
                  "
                >
                  {{ label.item }}
                </el-tag>
              </div>
              <div class="select-list">
                已选关键词：
                <el-tag
                  :key="index"
                  v-for="(tag, index) in selectLabel"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="addTagValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button
                  type="text"
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ 关键词</el-button
                >
              </div>

              <SubBtn>
                <template slot="btn">
                  <span class="sharespan" @click="lastreport"
                    >上次案情分析报告<i class="el-icon-arrow-right"></i
                  ></span>

                  <el-button round class="shareBtn" @click="clickAnalysis"
                    >解析案情</el-button
                  >
                </template>
              </SubBtn>
            </div>
            <!-- 输入案情 ******************** end -->

            <!-- 选取案情 ******************** -->
            <div class="selectCase" v-else-if="caseState == 2">
              <!-- 解析中 -->
              <div class="schedule" v-if="analysisState">
                <div class="progressBar">
                  <el-progress
                    type="circle"
                    :percentage="25"
                    :stroke-width="14"
                    color="#BBBAC2"
                  ></el-progress>
                  <p>案情解析中...</p>
                  <span>约10分钟完成</span>
                </div>
              </div>
              <!-- 案情列表 -->
              <div class="case-List" v-else>
                <div class="progressBar">
                  <el-progress
                    type="circle"
                    :percentage="progressPercent"
                    :stroke-width="14"
                    color="#BBBAC2"
                  ></el-progress>
                  <p>案件分析中</p>
                  <span>约10分钟完成...</span>
                </div>
              </div>
            </div>
            <!-- 选取案情 ******************** end -->

            <!-- 获取报告 ********************* -->
            <div class="reviewOk" v-else-if="caseState == 3">
              <div class="progressBar">
                <el-progress
                  type="circle"
                  :percentage="100"
                  :stroke-width="14"
                  color="#BBBAC2"
                ></el-progress>
                <p>案件报告已生成</p>
                <el-button @click="caseState = 1" round>再分析一份</el-button>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <!-- 推荐内容 -->
          <!-- <div class="featuredContent" v-if="rightShow==1">
            <FeaturedContent></FeaturedContent>
          </div> -->
          <!-- 支付页面 -->
          <!-- <div v-if="rightShow==2">
          <Pay @tofather="payinfo"></Pay>
          </div> 
      -->
          <!-- 获取报告 -->
          <!-- <div class="getReport" v-if="rightShow == 3">
            <getReport></getReport>
          </div> -->
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import DetailPage from "./detailPage.vue";
import getReport from "./getReport.vue";
import Pay from "./Pay.vue";

import FeaturedContent from "@/components/FeaturedContent";
import Compay from "../../../../BMViews/components/Compay/index.vue";
import {
  getCaseLabellist,
  getanalysisCaselist,
  getInfoCaselist,
  getReportlist,
} from "../../../../BMViews/api/simulation/simulation";

export default {
  name: "Simulation",
  components: {
    NewCard,
    FeaturedContent,
    SubBtn,
    DetailPage,
    getReport,
    Compay,
    Pay,
  },
  data() {
    return {
      caseState: 1, //1输入案情 2选取案情 3获取报告
      rightShow: 1, //1推荐内容 2案件详情 3解析报告
      progressPercent: 0, //初始值

      // 输入案情
      textarea: "",
      //已选标签
      selectLabel: [],
      //添加标签输入框显示隐藏
      inputVisible: false,
      //添加标签输入框的值
      addTagValue: "",
      //标签列表
      labelList: [],

      //案件详情数据集合
      CaseLabetabel: [],

      selectExpertType: "2", //点击高亮

      analysisState: false, //true解析中，false选择案情
      selectCase: {}, //当前选中的案情
    };
  },
  mounted() {
    this.$bus.$on("tofather", (item, e) => {
      console.log(item, "item");
      console.log(e, "item");

      this.caseState = item;
      //  this.rightShow=1
      //查询所有的案例详情
      this.getInfoCaselistfn();
    });
  },
  methods: {
    //获取案情标签
    async changtag() {
      let { data, code } = await getCaseLabellist({ text: this.textarea });
      if (code == 200) {
        let newlabelList = data.data;
        //数组对象去重
        let hash = {};
        let newArr = newlabelList.reduce((item, next) => {
          hash[next.item] ? "" : (hash[next.item] = true && item.push(next));
          return item;
        }, []);
        this.labelList = newArr;
      }
    },

    //解析案情
    async getanalysisCaselistfn() {
      let { data, code } = await getanalysisCaselist(
        this.selectLabel.join(",")
      );
      if (data.code == 200) {
        // this.rightShow=2
        this.$emit("showpaystatus", 2);
      } else {
        this.$message({
          message: data.data.content,
          type: "warning",
        });
      }
    },
    // 查询案例详情
    async getInfoCaselistfn() {
      // //路由参数（默认选中哪一项）
      // let defaultId = this.$route;
      let { data, code } = await getInfoCaselist();
      if (code == 200) {
        //  使用定时器来制作进度条
        this.timer = setInterval(() => {
          //progressPercent 进度条数字
          this.progressPercent++;
          //这里之所以到75%就结束定时器，下面具体解释
          if (this.progressPercent == 75) {
            clearInterval(this.timer);
            // 这里必须使用this.timer = null，否则清除定时器无效
            this.caseState = 3;
            this.rightShow = 3;
            this.timer = null;
          }
        }, 2000);
        console.log(data.data, " data.data");
        let CaseLabetabellist = data.data;
        CaseLabetabellist.forEach((item) => {
          this.CaseLabetabel.push(item.file_id);
        });
        this.getReportlistfn(this.CaseLabetabel);
      }
    },
    // 获取报告分析
    async getReportlistfn(fileId) {
      let { data, code } = await getReportlist(fileId);
      console.log(data, "hhhhhhhhhhhhhhhhhhhhhhhhh");

      if (data.code == 200) {
        // 创建一个完成后的定时器，会在progressPercent = 72 的基础上继续增加
        this.finishtimer = setInterval(() => {
          if (this.progressPercent < 100) {
            this.progressPercent++;
            if (this.progressPercent == 100) {
              clearInterval(this.finishtimer);
              clearInterval(this.timer);
              this.finishtimer = null;
              this.progressPercent = 0;
              this.$bus.$emit("report");
              this.caseState = 3;
            }
          }
        }, 100);
      }
    },
    //上次分析报告
    lastreport() {
      this.$emit("lastreport", 3);
      //  this.$emit("showpaystatus", 2);
    },
    //删除一个标签
    handleClose(tag) {
      this.selectLabel.splice(this.selectLabel.indexOf(tag), 1);
    },
    //显示输入框
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //回车和失去焦点添加标签
    handleInputConfirm() {
      let addTagValue = this.addTagValue;
      if (addTagValue) {
        this.selectLabel.push(addTagValue);
      }
      this.inputVisible = false;
      this.addTagValue = "";
    },
    //点击标签列表某一个标签添加
    clickTagList(label) {
      const result = this.selectLabel;
      const index = result.indexOf(label.item);
      //不存在添加
      if (index == -1) {
        this.selectLabel.push(label.item);
      } else {
        //存在删除
        this.selectLabel.splice(index, 1);
      }
      this.selectExpertType = "2";
      label.isChecked = !label.isChecked;
    },
    //点击解析案情
    clickAnalysis() {
      if (this.selectLabel.length == 0) {
        this.$message({
          message: "请选择关键词",
          type: "warning",
        });
      } else {
        this.getanalysisCaselistfn();
      }
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .label-box-content .el-row {
  position: initial;
}
::v-deep .el-card__body {
  position: relative;
  padding: 0 30px;
}
::v-deep .simulate-left .el-card__body {
  padding: 0;
}
::v-deep .simulate-left .el-card__body .top {
  display: none;
}
::v-deep .el-card__body > div {
  height: 100%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* .pd30{
  padding: 0 30px;
} */

/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  /* border: 1px solid #E5E6E9;
  background-color: #F1F3FF; */
  border-radius: 12px;
  padding: 26px 0;
  /* margin: 0 30px; */
  margin-top: 15px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist .tabNum {
  font-style: normal;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  border: 2px solid #c8cce2;
  border-radius: 50%;
  color: #c8cce2;
}
.tabOne .tablist .el-icon-success {
  display: none;
  font-size: 33px;
  color: #c8cce2;
}

.tabOne .tablist.isActive .tabNum {
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
}
.tabOne .tablist.isOk .tabNum {
  display: none;
}
.tabOne .tablist.isOk .el-icon-success {
  display: block;
  color: #f87a23;
  opacity: 0.5;
}

.tabOne .tablist button {
  color: #9c9da6;
  font-size: 16px;
  /* background-color: transparent; */
  border: none;
  padding: 6px 20px;
  margin-top: 25px;
}
.tabOne .tablist .tablistspan {
  border-bottom: 3px solid #f87a23;
  padding: 15px;
  /* opacity: ; */
}

.tabOne .tablist .tablisttn {
  opacity: 0.5;
}

.tabOne .tablist button:hover {
  background-color: transparent;
}

/* .tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #f87a23;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
} */
.tabOne > b {
  display: flex;
  align-items: flex-end;
}
.tabOne > b::before,
.tabOne > b::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  border-right: 0px solid transparent;
  border-left: 6px solid #c8cce2;
  margin-bottom: 15px;
  margin-right: 1px;
}
.tabOne > b.isOk::before,
.tabOne > b.isOk::after,
.tabOne > b.isActive::before,
.tabOne > b.isActive::after {
  border-left-color: #f87a23;
}
.tabOne > b.opcityb::before,
.tabOne > b.opcityb::after {
  opacity: 0.5;
}

.tabOne .tablist.isActive button,
.tabOne .tablist.isOk button {
  color: #f87a23;
  /* background-color: #ffff; */
  /* border-color: #f87a23; */
  /* font-weight: bold; */
}
.tabOne .tablist.isOk button {
  /* background-color: #f87a23; */
  border-color: #f87a23;
  font-weight: 400;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}
@media (max-width: 1430px) {
  .tabOne .tablist button {
    padding: 6px 10px;
  }
}

/* 输入案情 */
.inputCase {
  /* margin: 0 30px; */
  margin-top: 20px;
  margin-bottom: 60px;
}
::v-deep .inputCase .el-textarea__inner {
  font-family: Microsoft Yahei;
}
.label-list {
  margin-top: 20px;
}
.label-list .el-tag {
  width: 15%;
  margin-right: 2%;
  margin-bottom: 2%;
  padding: 0;
  text-align: center;
  height: 36px;
  line-height: 34px;
  border-radius: 18px;
  border-color: #efefef;
  cursor: pointer;
}
.label-list .el-tag:nth-child(6n) {
  margin-right: 0;
}
.label-list .el-tag:hover {
  background-color: #f4f5f8;
  border-color: #f4f5f8;
}

.select-list {
  font-size: 12px;
  color: #666666;
  margin: 20px 0;
}
.select-list .el-tag {
  border-color: #f7ecda;
  color: #f87a23;
  border-radius: 14px;
  margin-right: 6px;
  background-color: #fffaf2;
}
::v-deep .select-list .el-tag .el-tag__close {
  color: #f87a23;
}
::v-deep .select-list .el-tag .el-tag__close:hover {
  background-color: #f87a23;
  color: #fff;
}

.select-list .button-new-tag {
  margin-left: 10px;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  color: #f87a23;
}
.select-list .input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
::v-deep .select-list .input-new-tag > input {
  height: 26px;
  line-height: 26px;
}
/* 输入案情 end */

/* 选取案情 */
/* 解析中 */
.progressBar {
  text-align: center;
  margin-top: 50px;
}
::v-deep .progressBar .el-progress .el-progress__text {
  color: #f87a23;
}
.progressBar p {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  margin: 0;
  margin-top: 50px;
  margin-bottom: 15px;
}
.progressBar span {
  font-size: 12px;
  color: #bababa;
}

/* 审核完成 */
.progressBar .el-button {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 50px;
}
/* 支付信息 */
.pay_main {
  margin-bottom: 70px;
  margin-top: 15px;
}
.pay_main .el-card {
  border-radius: 12px;
}
::v-deep .pay_main .el-card__body {
  padding: 20px;
}
.pay_main h3 {
  margin: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.pay_main p {
  font-size: 14px;
  color: #999;
  margin: 0;
  line-height: 24px;
}
.pay_main .el-row {
  margin-top: 40px;
}
::v-deep .pay_main .el-row .el-input__inner {
  border-radius: 8px;
  height: 44px;
  line-height: 44px;
}
.pay_main .el-row .acceptEmail {
  border: 0;
  padding: 5px 0;
  margin: 7px 0;
  margin-right: 10px;
  font-size: 14px;
  color: #bababa;
  background: #fff;
  cursor: pointer;
}
.pay_main .el-row .acceptEmail:hover {
  color: #f87a23;
}
.pay_main .inputTitle {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}
.pay_main .inputTitle span {
  font-size: 14px;
  color: #999;
  font-weight: 400;
}
::v-deep .pay_main .el-tabs__header {
  border: 0;
  margin-bottom: 24px;
}
::v-deep .pay_main .el-tabs__nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 0;
}
::v-deep .pay_main .el-tabs__item {
  width: 49%;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  background-color: #fafafa;
}
::v-deep .pay_main .el-tabs__item.is-active {
  background-color: #f1f3ff;
  color: #39486f;
}
::v-deep .pay_main .el-tabs__item:hover {
  color: #39486f;
}

.askGold {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.askGold li {
  display: flex;
  margin-bottom: 24px;
}
.askGold li .el-avatar {
  margin-right: 14px;
}
.askGold .askInfo h3 {
  margin-bottom: 5px;
  font-size: 16px;
  color: #333;
}
.askGold .askInfo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ecedf0;
  padding-bottom: 24px;
}
.askGold .askInfo p {
  font-size: 12px;
  color: #666;
}
.askGold .askInfo button {
  color: #39486f;
  border-color: #39486f;
  padding: 5px 15px;
}
::v-deep .askInfo .el-radio__label {
  display: none;
}
::v-deep .askInfo .el-radio .el-radio__inner {
  width: 24px;
  height: 24px;
  border-color: #bbbbbb;
  background: #fff;
}
::v-deep .askInfo .el-radio .is-disabled .el-radio__inner {
  background: #f2f2f2;
}
::v-deep .askInfo .el-radio .is-checked .el-radio__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .askInfo .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 11px;
  height: 7px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 6px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
.payBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ecedf0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
}
.payBtn p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}
.payBtn p > span {
  color: #f87a23;
  font-size: 16px;
}
.payBtn .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  padding: 10px 50px;
}
.payBtn .el-button:hover {
  opacity: 0.9;
}

.scanQr {
  text-align: center;
}
.scanQr img {
  width: 150px;
}
.scanQr p {
  color: #f87a23;
  font-size: 18px;
  font-weight: bold;
}
.scanQr span {
  font-size: 12px;
  color: #999;
}

/* 按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  z-index: 99;
}
::v-deep .subBtn > .el-button {
  /* width: 100px; */
  padding: 8px 20px !important;
  font-size: 14px;
  color: #fff;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
::v-deep .shareBtn {
  background-color: #f87a23;
  border-color: #f87a23;
  /* color: #fff; */
}
::v-deep .sharespan {
  font-size: 12px;
  color: #666666;
}
.sharespan:hover {
  /* font-size: 12px; */
  color: #f87a23;
}

/* 点击高亮 */
.isChecked {
  background-color: #f6f5f8;
}
.subBtn {
  justify-content: space-between;
  align-items: center;
}
</style>

    